<template>
   <div class="card top">
      <el-button
         v-for="(btn, index) in groupBtns"
         class="opBtn"
         :type="btn.type"
         @click="emit(`groupBtnClick`, btn.callback)"
         :disabled="disabledArr[index]">
         <slot :name="btn.slotName">
            <el-icon><Menu /></el-icon>
         </slot>

         &nbsp;{{ btn.name }}
      </el-button>
   </div>
</template>

<script setup lang="ts">
import { Menu, Delete, Edit } from "@element-plus/icons-vue";
import { defineProps, defineEmits, ref, defineExpose } from "vue";

const { groupBtns } = defineProps({
   groupBtns: Array<GroupBtn>,
});

const emit = defineEmits({
   groupBtnClick: null,
});

// [true undefined undefined] 代表禁用第一枚按钮
const disabledArr = ref<Array<boolean>>([]);
const disableBtn = index => {
   console.log("disableBtn called", index);
   disabledArr.value![index] = true;
};

/* 父组件调用子组件暴露出来的API：xxRef.value.disableBtn(0) */
defineExpose({
   disableBtn,
});
</script>

<style lang="scss" scoped>
.top {
   display: flex;
   justify-content: flex-end;
   .opBtn {
      width: 100px;
   }
}
</style>
